﻿@{
    ViewData["Title"] = "Pinyin4Net 示例页面";
}

<div style="width:800px;margin: 0 auto;">
    <h1>Pinyin4Net Web Demo</h1>
    <div class="panel panel-default">
        <div class="panel-heading">
            汉字转拼音
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <span class="format-label">大小写类型</span>
                        <select class="form-control" id="caseType">
                            <option value="UPPERCASE">大写</option>
                            <option value="LOWERCASE" selected="selected">小写</option>
                            <option value="CAPITALIZE_FIRST_LETTER">首字母大写</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <span class="format-label">声调</span>
                        <select class="form-control" id="toneType">
                            <option value="WITH_TONE_MARK" selected="selected">声调标志</option>
                            <option value="WITH_TONE_NUMBER">声调数值</option>
                            <option value="WITHOUT_TONE">无声调</option>
                        </select>
                    </div>
                </div>
            </div>                
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <span class="format-label">字符v输出格式</span>
                        <select class="form-control" id="vType">
                            <option value="WITH_U_UNICODE" selected="selected">ü</option>
                            <option value="WITH_V">v</option>
                            <option value="WITH_U_AND_COLON">u:</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <span class="format-label">多音字取</span>
                        <select class="form-control" id="multi">
                            <option value="FIRST" selected="selected">第一个</option>
                            <option value="ALL">全部</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">汉字</span>
                <input type="text" class="form-control" data-cmd="0" value="Javascript 爱好者 传说" />
                <span class="input-group-addon">按回车触发</span>
            </div>
            <br />
            <div class="input-group">
                <span class="input-group-addon">拼音</span>
                <input type="text" name="output" class="form-control" placeholder="汉字转拼音结果" readonly="readonly" />
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            拼音查汉字
            <label style="margin-left: 20px;">
                <input type="checkbox" id="matchAll" checked="checked" style="vertical-align: -2px;"> 完整匹配
            </label>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <span class="input-group-addon">拼音</span>
                <input type="text" class="form-control" value="lo" data-cmd="1" />
                <span class="input-group-addon">按回车触发</span>
            </div>
            <br />
            <div class="input-group">
                <span class="input-group-addon">汉字</span>
                <input type="text" name="output" class="form-control" placeholder="匹配汉字结果" readonly="readonly" />
            </div>
        </div>
    </div>
    代码:
    <a href="https://github.com/hyjiacan/Pinyin4Net" target="_blank">GitHub</a>
    |
    <a href="https://gitee.com/hyjiacan/Pinyin4Net" target="_blank">码云</a>
</div>